<template>
	<div class="title-bg">
		<div class="tiao"></div>
		<div class="title">
			<span></span>
			<div>
				<slot></slot>
			</div>
		</div>
	</div>
</template>

<style lang="scss" scoped>
.title-bg {
	display: flex;
	height: 34px;
	font-size: 18px;
	line-height: 34px;
	color: #fff;

	.tiao {
		width: 5px;
		height: 100%;
		background: #1f4ca2;
		opacity: 0.59;
	}

	.title {
		margin-left: 5px;
		background: linear-gradient(270deg, rgb(31 76 162 / 0%) 0%, rgb(31 76 162 / 59%) 100%);

		> span {
			display: inline-block;
			width: 8px;
			height: 8px;
			margin: 0 10px 2px;
			background: #fff;
			border-radius: 50%;
		}

		> div {
			display: inline-block;
			min-width: 210px;
		}
	}
}
</style>
